<template>
  <!-- 顶部 手机状态栏 根据用户手机动态设置 高度 -->
  <status-bar :statusBarHeight="statusBarHeight"></status-bar>

  <!-- 导航栏 -->
  <nav-bar :title="title" :organizationList="organizationList" :isLeftButton="false"></nav-bar>

  <!-- 地图 -->
  <map-module :newMarkers="newMarkers"></map-module>

  <!-- 警情统计 -->
  <alarm-statistic @changeTimeDuration="changeTimeDuration"></alarm-statistic>

  <!-- 一键打卡模块 -->
  <view :class="$style.punch" class="absolute flex-col-center" @click="handlePunch" v-if="punchShowFlag">
    <view :class="$style.text">一键打卡</view>
  </view>

  <view :class="$style.punch_notice" class="absolute flex-col-center" v-if="punchCompleteFlag">
    <text>打卡已完成</text>
  </view>

</template>

<script setup lang="ts">
import StatusBar from '@/components/status-bar/index.vue';
import NavBar from "@/components/nav-bar/index.vue";
import AlarmStatistic from './alarm-statistic/index.vue';

import MapModule from "./map/index.vue";

import { provide, ref, onMounted } from "vue";
import { useSystemInfo, useAuthStore } from "@/store";
import { queryMapAlertInfo } from '@/api';

const systemInfo = useSystemInfo();
const statusBarHeight = ref<number>(systemInfo.statusBarHeight);

const title = ref<string>("燃气联动手机报");
const organizationList = ref<Array<string>>(["南京消防", "南京建委"]);
const authStore = useAuthStore()
let lqryInfo: any = authStore.getLqryInfo
provide('statusBarHeight', statusBarHeight)

const punchShowFlag = ref<boolean>(true);
const punchCompleteFlag = ref<boolean>(false)
let newMarkers = ref<any>();
/**
 * 进行 一键打卡操作
 */
function handlePunch() {
  punchShowFlag.value = false
  punchCompleteFlag.value = true
  setTimeout(() => {
    punchCompleteFlag.value = false
  }, 2000)
}

/**
 * 子组件切换时间 传递的值
 */
function changeTimeDuration(value: number | string) {
  getMapLabelList(value)
}

/**
 * 获取 地图 警情标记信息
 * @param value 0 表示 天, 1 表示 月, 2 表示 年
 * 
 */
let params: any = {
  endTime: '',
  yjlddwlxdm: lqryInfo.yjlddwlxdm,
  startTime: '',
}

onMounted(() => {
  // 默认加载
  getMapLabelList(0);
});

function getMapLabelList(value: number | string) {
  // 今日
  if (value == 0) {
    params.startTime = getDate(0);
    params.endTime = getDate(1);
  }
  // 本月
  if (value == 1) {
    params.startTime = getMonth("s", 0);
    params.endTime = getMonth("e", 0);
  }
  // 本年
  if (value == 2) {
    params.startTime = getYear("s", 0);
    params.endTime = getYear("e", 0);
  }
  params.startTime += " 00:00:00"
  params.endTime += " 00:00:00"
  queryMapAlertInfo(params).then((res: any) => {
    newMarkers.value = res.data.map((item: any) => {
      return {
        id: item.lasj,
        latitude: item.wd || 32.0415,
        longitude: item.jd || 118.784321,
        width: 40,
        height: 40,
        iconPath: item.tbUrl,
        jqId: item.id
      }
    })
  }).catch((e: any) => {
    console.log(e);
  }) || []
}

// 当日
function getDate(dates: any) {
  var dd = new Date();
  var n = dates || 0;
  dd.setDate(dd.getDate() + n);
  var y = dd.getFullYear();
  var m = dd.getMonth() + 1;
  var d = dd.getDate();
  m = m < 10 ? 0 + m : m;
  d = d < 10 ? 0 + d : d;
  var day = y + "-" + m + "-" + d;
  return day;
};

// 本月
function getMonth(type: any, months: any) {
  var d = new Date();
  var year = d.getFullYear();
  var month = d.getMonth() + 1;
  if (Math.abs(months) > 12) {
    months = months % 12;
  };
  if (months != 0) {
    if (month + months > 12) {
      year++;
      month = (month + months) % 12;
    } else if (month + months < 1) {
      year--;
      month = 12 + month + months;
    } else {
      month = month + months;
    };
  };
  month = month < 10 ? 0 + month : month;
  var date = d.getDate();
  var firstday = year + "-" + month + "-" + "01";
  var lastday = "";
  if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 ||
    month == 12) {
    lastday = year + "-" + month + "-" + 31;
  } else if (month == 2) {
    if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
      lastday = year + "-" + month + "-" + 29;
    } else {
      lastday = year + "-" + month + "-" + 28;
    };
  } else {
    lastday = year + "-" + month + "-" + 30;
  };
  var day = "";
  if (type == "s") {
    day = firstday;
  } else {
    day = lastday;
  };
  return day;
};

// 本年
function getYear(type: any, dates: any) {
  var dd = new Date();
  var n = dates || 0;
  var year = dd.getFullYear() + Number(n);
  var day = ""
  if (type == "s") {
    day = year + "-01-01";
  };
  if (type == "e") {
    day = year + "-12-31";
  };
  if (!type) {
    day = year + "-01-01/" + year + "-12-31";
  };
  return day;
};
</script>

<style lang='less' module>
.status {
  background-color: #385add;
}

.punch {
  right: 20rpx;
  top: 750rpx;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background-image: linear-gradient(to bottom right, #307bdf, #df0428);

  .text {
    width: 66rpx;
    font-size: 32rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
  }
}

.punch_notice {
  width: 378rpx;
  height: 80rpx;
  top: 500rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 40rpx;
  font-size: 26rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;

}
</style>
